<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          padding: 0;
          margin: auto;
        }
        .tou{
            width: 500px;
            height: 50px;
           
        }
        .tou input{
            width: 400px;
            height: 50px;
        }
        .tou button{
            width: 90px;
            height: 55px;
        }
        .rong{
            width: 500px;
            height: 500px;
            border: black 1px solid;
            position: relative;
            top: 50px;
        }
        ul{
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: column;
        }
        li{
            width: 400px;
            height: 40px;
            background-color: aqua;
            border-radius: 10px;
            line-height: 40px;
        }

        .caozuo{
            width: 100px;
            height: 300px;
            position: fixed;
            left: 800px;
            top: 100px;
            background-color: aliceblue;
            text-align: center;
            border-radius: 20px;
            line-height: 50px;
        }
        .caozuo button{
            width: 80px ;
        }
        .you{
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="tou"><input type="text" placeholder="新增待办事项..."> <button onclick="tian()">提交</button></div>
    <div class="rong">
        <ul>
          
        </ul>
    </div>
    <div class="caozuo">
        <button onclick="one()">显示所有</button><br>
        <button onclick="two()">进行中</button><br>
        <button onclick="three()">已完成</button><br>
        <button onclick="four()">清除全部</button><br>
    </div>
    <script>
        var arr = []
         var input = document.querySelectorAll('input')
         var ul = document.querySelector('ul')
         function apply(){
                ul.innerHTML = ''
             arr.forEach(item =>{
                 ul.innerHTML += `
                 <li ><button onclick = 'wan(${item.id})'>完成</button><span>${item.inp}</span><span class = 'wancheng'>${item.zhuang}</span><button onclick = 'shan(${item.id})' class='you'>删除</button></li>`
             })
             }
             apply()
         function tian(){
             arr.push({
                id:arr.length+1,
                inp:input[0].value,
                zhuang:'（未完成）'
             })  
          apply()
         }
        //  删除
         function shan(i){
            var a = arr.findIndex(item => item.id == i)
            arr.splice(a,1)
            console.log(arr)
            apply()
         }
        //  完成事项
        var wancheng =document.querySelectorAll('wancheng')
         function wan(i){
            // console.log(wancheng)
            var b = arr.find(item => item.id == i)
           if(b.zhuang == '（未完成）' ){
             b.zhuang = '（已完成）'
             apply()
           }else{
            b.zhuang = '（未完成）'
            apply()
           }
           
            //  console.log( )
         }
        //  全部
        function one(){
            apply()
        }
        // 未完成
        function two(){
            var c = arr.filter(item => item.zhuang == '（未完成）')
            console.log(c)
            ul.innerHTML = ''
            c.forEach(item => {
                ul.innerHTML += `
                 <li ><button onclick = 'wan(${item.id})'>完成</button><span>${item.inp}</span><span class = 'wancheng'>${item.zhuang}</span><button onclick = 'shan(${item.id})' class='you'>删除</button></li>`
            })
        }
        // 已完成
        function three(){
            var e = arr.filter(item => item.zhuang == '（已完成）')
            ul.innerHTML = ''
            e.forEach(item => {
                ul.innerHTML += `
                 <li><button onclick = 'wan(${item.id})'>完成</button><span>${item.inp}</span><span class = 'wancheng'>${item.zhuang}</span><button onclick = 'shan(${item.id})' class='you'>删除</button></li>`
             
            })
        }
        function four(){
            arr = []
            apply()
        }
    </script>
</body>
</html>